<template>
  <div>
    <VueDraggable v-model="viewData" class="process-table-box" handle=".handle" target="tbody" :animation="150">
      <el-table max-height="500" border :data="viewData">
        <el-table-column label="列名" align="center" :resizable="false">
          <template #default="{ row }">
            <div class="flex items-center">
              <el-icon class="handle font-size-16px mr-5px cursor-move">
                <Rank />
              </el-icon>
              <div>{{ row.title }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="150" label="宽度" align="center" :resizable="false">
          <template #default="{ row }">
            <div>
              <el-input-number v-model="row.width" :controls="false" :precision="0" :min="50" :max="300"
                style="width: 120px" />
            </div>
          </template>
        </el-table-column>
        <el-table-column width="150" label="是否显示" align="center" :resizable="false">
          <template #default="{ row }">
            <div>
              <el-checkbox v-model="row.display" />
            </div>
          </template>
        </el-table-column>
      </el-table>
    </VueDraggable>
    <div class="flex justify-end mt-20px">
      <el-button type="primary" :loading="loadingButton" @click="getViewData"> 确定 </el-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { VueDraggable } from 'vue-draggable-plus'
import { ref, onMounted, watch } from 'vue'
const emits = defineEmits(['updateTableView', 'confirm'])

const props = defineProps<{ viewData: any[] }>()

// const viewInfo = ref<any>({})
const viewData = ref<any>([])
const loadingButton = ref(false)

watch(() => viewData.value, (val) => {
  emits('updateTableView', val)
}, { deep: true })

// 表格拖拽结束触发

/* 保存 */
const getViewData = () => {
  loadingButton.value = true
  emits('confirm', viewData.value)
  loadingButton.value = false
}


onMounted(() => {
  viewData.value = JSON.parse(JSON.stringify(props.viewData))
})

defineExpose({ getViewData })
</script>
<style scoped lang="scss"></style>
